import {
  brushIcon,
  closeIcon,
  deleteIcon,
  eraserIcon,
  laserIcon,
  mouseIcon,
  saveIcon,
  shapeIcon,
} from '@/components/Icons/svg';
import Icon from '@ant-design/icons';
import { useGetState, useThrottleFn } from 'ahooks';
import { Button, ColorPicker, Modal, message } from 'antd';
import { useEffect, useRef, useState } from 'react';
import SVG from 'react-inlinesvg';
import styles from './whiteboardOperationBar.less';

let lineIndex = 0;
const WhiteboardOperationBar = () => {
  const [operationType, setOperationType, getOperationType] =
    useGetState<number>(3);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [isDrawing, setIsDrawing, getIsDrawing] = useGetState<boolean>(false);
  const [brushVisible, setBrushVisible] = useState<boolean>(false);
  const [modalPosition, setModalPosition] = useState({ top: 0, left: 0 });
  const [brushSize, setBrushSize, getBrushSize] = useGetState<number>(2);
  const [brushColor, setBrushColor, getBrushColor] =
    useGetState<string>('#f5222d');
  const [shapeVisible, setShapeVisible] = useState<boolean>(false);
  const [startPoint, setStartPoint, getStartPoint] = useGetState({
    x: 0,
    y: 0,
    lineIndex: lineIndex,
  });
  const [endPoint, setEndPoint, getEndPoint] = useGetState({
    x: 0,
    y: 0,
    lineIndex: lineIndex,
  });
  const [shapeType, setShapeType, getShapeType] = useGetState<number>(1);
  const [shapeSize, setShapeSize, getShapeSize] = useGetState<number>(1);
  const [shapeColor, setShapeColor, getShapeColor] =
    useGetState<string>('#f5222d');
  const [lines, setLines, getLines] = useGetState<
    {
      startPoint: {
        x: number;
        y: number;
        lineIndex: number;
      };
      endPoint: {
        x: number;
        y: number;
        lineIndex: number;
      };
      lineColor: string;
      lineSize: number;
      type: string;
    }[]
  >([]);

  useEffect(() => {
    //回调主进程显示窗体
    window.tm!.ipcRenderer.send('set-whiteboardWindow-show');
    const el = document.getElementById('operationId');
    const handleMouseEnter = () => {
      window.tm!.ipcRenderer.send('set-whiteboard-ignore-mouse-events', false);
    };
    const handleMouseLeave = () => {
      const type = getOperationType();
      if (type != 2 && type != 3 && type != 4 && type != 5 && type != 6) {
        window.tm!.ipcRenderer.send(
          'set-whiteboard-ignore-mouse-events',
          true,
          {
            forward: true,
          },
        );
      }
    };

    window.osn.on('stopWhiteboardOperationBar', (event: any) => {
      operationTypeChange(6, event);
    });

    el!.addEventListener('mouseenter', handleMouseEnter);
    el!.addEventListener('mouseleave', handleMouseLeave);
    return () => {
      el!.removeEventListener('mouseenter', handleMouseEnter);
      el!.removeEventListener('mouseleave', handleMouseLeave);
    };
  }, []);

  useEffect(() => {
    const canvas = canvasRef.current!;
    const ctx = canvas.getContext('2d')!;
    if (getOperationType() === 3) {
      ctx.strokeStyle = brushColor;
      ctx.lineWidth = brushSize;
    } else if (getOperationType() === 4) {
      ctx.strokeStyle = shapeColor;
      ctx.lineWidth = shapeSize;
    }
    const startDrawing = (e: any) => {
      lineIndex++;
      if (getOperationType() === 3) {
        setIsDrawing(true);
        ctx.beginPath();
        ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
        // 设置起点
        const x = e.clientX;
        const y = e.clientY;
        setStartPoint({
          x: e.clientX - canvas.offsetLeft,
          y: e.clientY - canvas.offsetTop,
          lineIndex: lineIndex,
        });
        setEndPoint({
          x: e.clientX - canvas.offsetLeft,
          y: e.clientY - canvas.offsetTop,
          lineIndex: lineIndex,
        });
        setBrushVisible(false);
      } else if (getOperationType() === 4) {
        const x = e.clientX;
        const y = e.clientY;
        // 设置起点
        setStartPoint({ x: x, y: y, lineIndex: lineIndex });
        setEndPoint({ x: x, y: y, lineIndex: lineIndex });
        setIsDrawing(true);
      } else if (getOperationType() === 5) {
        setIsDrawing(true);
      }
    };

    const stopDrawing = (e: any) => {
      if (getOperationType() === 3) {
        setIsDrawing(false);
        const newLines = getLines().filter(
          (line) => line.startPoint.lineIndex === line.endPoint.lineIndex,
        );
        setLines(newLines);
      } else if (getOperationType() === 4) {
        // 将当前线条添加到线条数组中
        if (getStartPoint().lineIndex === getEndPoint().lineIndex) {
          setLines([
            ...getLines(),
            {
              startPoint: getStartPoint(),
              endPoint: getEndPoint(),
              lineColor: getShapeColor(),
              lineSize: getShapeSize(),
              type: getShapeType() + '',
            },
          ]);
        }
        setIsDrawing(false);
      } else if (getOperationType() === 5) {
        setIsDrawing(false);
      }
    };

    canvas.addEventListener('mousedown', startDrawing);
    canvas.addEventListener('mousemove', drawLine);
    canvas.addEventListener('mouseup', stopDrawing);
    canvas.addEventListener('mouseleave', stopDrawing);
    return () => {
      canvas.removeEventListener('mousedown', startDrawing);
      canvas.removeEventListener('mousemove', drawLine);
      canvas.removeEventListener('mouseup', stopDrawing);
      canvas.removeEventListener('mouseleave', stopDrawing);
    };
  }, [
    brushVisible,
    brushColor,
    brushSize,
    shapeVisible,
    shapeColor,
    shapeSize,
  ]);

  //节流
  const { run: drawLine } = useThrottleFn(
    (e: any) => {
      const canvas = e.target as HTMLCanvasElement;
      const ctx = canvas.getContext('2d')!;
      const isDraw = getIsDrawing();
      if (!isDraw) return;
      if (getOperationType() === 3) {
        // 更新终点
        ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
        ctx.stroke();
        if (
          getLines().length === 0 &&
          getStartPoint().lineIndex === lineIndex
        ) {
          setLines([
            {
              startPoint: getStartPoint(),
              endPoint: {
                x: e.clientX - canvas.offsetLeft,
                y: e.clientY - canvas.offsetTop,
                lineIndex: lineIndex,
              },
              lineColor: getBrushColor(),
              lineSize: getBrushSize(),
              type: 'brush',
            },
          ]);
        } else {
          setLines([
            ...getLines(),
            {
              startPoint: getLines()[getLines().length - 1].endPoint,
              endPoint: {
                x: e.clientX - canvas.offsetLeft,
                y: e.clientY - canvas.offsetTop,
                lineIndex: lineIndex,
              },
              lineColor: getBrushColor(),
              lineSize: getBrushSize(),
              type: 'brush',
            },
          ]);
        }
      } else if (getOperationType() === 4) {
        // 清除之前的内容
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 绘制所有保存的线条
        getLines().forEach((line) => {
          ctx.strokeStyle = line.lineColor;
          ctx.lineWidth = line.lineSize;
          if (line.type === '1') {
            //直线
            ctx.beginPath();
            ctx.moveTo(line.startPoint.x, line.startPoint.y);
            ctx.lineTo(line.endPoint.x, line.endPoint.y);
            ctx.stroke();
          } else if (line.type === '2') {
            //箭头
            ctx.beginPath();
            ctx.moveTo(line.startPoint.x, line.startPoint.y);
            ctx.lineTo(line.endPoint.x, line.endPoint.y);
            ctx.stroke();
            ctx.save();
            ctx.translate(line.endPoint.x, line.endPoint.y);
            const angleOld = Math.atan2(
              line.endPoint.y - line.startPoint.y,
              line.endPoint.x - line.startPoint.x,
            );
            ctx.rotate(angleOld);
            ctx.beginPath();
            ctx.moveTo(-10, -5);
            ctx.lineTo(0, 0);
            ctx.lineTo(-10, 5);
            ctx.stroke();
            ctx.restore();
          } else if (line.type === 'brush') {
            //画笔
            ctx.beginPath();
            ctx.moveTo(line.startPoint.x, line.startPoint.y);
            ctx.lineTo(line.endPoint.x, line.endPoint.y);
            ctx.stroke();
          } else if (line.type === '3') {
            // 计算鼠标移动的距离，用于调整圆形的半径
            const deltaX = line.endPoint.x - line.startPoint.x;
            const deltaY = line.endPoint.y - line.startPoint.y;
            ctx.beginPath();
            ctx.ellipse(
              line.endPoint.x,
              line.endPoint.y,
              Math.abs(deltaX),
              Math.abs(deltaY),
              0,
              0,
              2 * Math.PI,
            );
            ctx.stroke();
          } else if (line.type === '4') {
            //计算鼠标移动的距离，用于调整方形长宽
            const width = line.endPoint.x - line.startPoint.x;
            const height = line.endPoint.y - line.startPoint.y;
            ctx.strokeRect(line.startPoint.x, line.startPoint.y, width, height);
          }
        });
        // 绘制直线前改回原来的颜色和大小
        ctx.strokeStyle = shapeColor;
        ctx.lineWidth = shapeSize;
        if (getShapeType() === 1) {
          //直线
          const x = e.clientX;
          const y = e.clientY;
          // 更新终点
          setEndPoint({ x, y, lineIndex: lineIndex });
          ctx.beginPath();
          ctx.moveTo(getStartPoint().x, getStartPoint().y);
          ctx.lineTo(x, y);
          ctx.stroke();
        } else if (getShapeType() === 2) {
          // 计算箭头的角度
          const angle = Math.atan2(
            getEndPoint().y - getStartPoint().y,
            getEndPoint().x - getStartPoint().x,
          );
          // 更新终点
          setEndPoint({ x: e.clientX, y: e.clientY, lineIndex: lineIndex });
          ctx.beginPath();
          ctx.moveTo(getStartPoint().x, getStartPoint().y);
          ctx.lineTo(e.clientX, e.clientY);
          ctx.stroke();
          // 绘制箭头头部
          ctx.save();
          ctx.translate(e.clientX, e.clientY);
          ctx.rotate(angle);

          ctx.beginPath();
          ctx.moveTo(-10, -5);
          ctx.lineTo(0, 0);
          ctx.lineTo(-10, 5);
          ctx.stroke();
          ctx.restore();
        } else if (getShapeType() === 3) {
          // 更新终点
          setEndPoint({ x: e.clientX, y: e.clientY, lineIndex: lineIndex });
          // 计算鼠标移动的距离，用于调整圆形的半径
          const deltaX = e.clientX - getStartPoint().x;
          const deltaY = e.clientY - getStartPoint().y;
          ctx.beginPath();
          ctx.ellipse(
            e.clientX,
            e.clientY,
            Math.abs(deltaX),
            Math.abs(deltaY),
            0,
            0,
            2 * Math.PI,
          );
          ctx.stroke();
          ctx.closePath();
        } else if (getShapeType() === 4) {
          // 更新终点
          setEndPoint({ x: e.clientX, y: e.clientY, lineIndex: lineIndex });
          //计算鼠标移动的距离，用于调整方形长宽
          const width = e.clientX - getStartPoint().x;
          const height = e.clientY - getStartPoint().y;
          ctx.strokeRect(getStartPoint().x, getStartPoint().y, width, height);
        }
      } else if (getOperationType() === 5) {
        // 设置橡皮擦效果
        let removeLineIndex: number[] = [];
        getLines().map((line) => {
          if (line.type === 'brush' || line.type === '1' || line.type === '2') {
            // 使用鼠标坐标和线段两个端点计算鼠标到线段的距离
            const distance = pointToLineDistance(
              { x: e.clientX, y: e.clientY },
              line.startPoint,
              line.endPoint,
            );
            // 在这里设定一个阈值，表示认为鼠标在线段附近，可以根据实际情况调整
            const threshold = 5;
            if (distance < threshold) {
              removeLineIndex.push(line.startPoint.lineIndex);
            }
          } else if (line.type === '3') {
            // 计算鼠标移动的距离，用于调整圆形的半径
            const deltaX = line.endPoint.x - line.startPoint.x;
            const deltaY = line.endPoint.y - line.startPoint.y;
            const distance = pointToEllipseDistance(
              { x: e.clientX, y: e.clientY },
              line.endPoint.x,
              line.endPoint.y,
              Math.abs(deltaX),
              Math.abs(deltaY),
            );
            // 在这里设定一个阈值，表示认为鼠标在椭圆附近，可以根据实际情况调整
            if (distance < 1) {
              removeLineIndex.push(line.startPoint.lineIndex);
            }
          } else if (line.type === '4') {
            const width = line.endPoint.x - line.startPoint.x;
            const height = line.endPoint.y - line.startPoint.y;
            ctx.strokeRect(line.startPoint.x, line.startPoint.y, width, height);
            // 使用鼠标坐标和矩形参数计算鼠标是否在矩形内
            const isInRect = pointInRect(
              { x: e.clientX, y: e.clientY },
              line.startPoint.x,
              line.startPoint.y,
              width,
              height,
            );
            if (isInRect) {
              removeLineIndex.push(line.startPoint.lineIndex);
            }
          }
        });
        if (removeLineIndex.length > 0) {
          const updatedItems = getLines().filter(
            (line) => !removeLineIndex.includes(line.startPoint.lineIndex),
          );
          // 清除之前的内容
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          updatedItems.forEach((line) => {
            ctx.strokeStyle = line.lineColor;
            ctx.lineWidth = line.lineSize;
            if (line.type === '1') {
              //直线
              ctx.beginPath();
              ctx.moveTo(line.startPoint.x, line.startPoint.y);
              ctx.lineTo(line.endPoint.x, line.endPoint.y);
              ctx.stroke();
            } else if (line.type === '2') {
              //箭头
              ctx.beginPath();
              ctx.moveTo(line.startPoint.x, line.startPoint.y);
              ctx.lineTo(line.endPoint.x, line.endPoint.y);
              ctx.stroke();
              ctx.save();
              ctx.translate(line.endPoint.x, line.endPoint.y);
              const angleOld = Math.atan2(
                line.endPoint.y - line.startPoint.y,
                line.endPoint.x - line.startPoint.x,
              );
              ctx.rotate(angleOld);
              ctx.beginPath();
              ctx.moveTo(-10, -5);
              ctx.lineTo(0, 0);
              ctx.lineTo(-10, 5);
              ctx.stroke();
              ctx.restore();
            } else if (line.type === 'brush') {
              //画笔
              ctx.beginPath();
              ctx.moveTo(line.startPoint.x, line.startPoint.y);
              ctx.lineTo(line.endPoint.x, line.endPoint.y);
              ctx.stroke();
            } else if (line.type === '3') {
              // 计算鼠标移动的距离，用于调整圆形的半径
              const deltaX = line.endPoint.x - line.startPoint.x;
              const deltaY = line.endPoint.y - line.startPoint.y;
              ctx.beginPath();
              ctx.ellipse(
                line.endPoint.x,
                line.endPoint.y,
                Math.abs(deltaX),
                Math.abs(deltaY),
                0,
                0,
                2 * Math.PI,
              );
              ctx.stroke();
            } else if (line.type === '4') {
              //计算鼠标移动的距离，用于调整方形长宽
              const width = line.endPoint.x - line.startPoint.x;
              const height = line.endPoint.y - line.startPoint.y;
              ctx.strokeRect(
                line.startPoint.x,
                line.startPoint.y,
                width,
                height,
              );
            }
          });
          setLines(updatedItems);
        }
        setStartPoint({ x: 0, y: 0, lineIndex: 0 });
        setEndPoint({ x: 0, y: 0, lineIndex: 0 });
      }
    },
    { wait: 10 },
  );

  const pointToLineDistance = (
    point: { x: number; y: number },
    lineStart: { x: number; y: number },
    lineEnd: { x: number; y: number },
  ) => {
    const { x: px, y: py } = point;
    const { x: x1, y: y1 } = lineStart;
    const { x: x2, y: y2 } = lineEnd;

    const A = px - x1;
    const B = py - y1;
    const C = x2 - x1;
    const D = y2 - y1;

    const dot = A * C + B * D;
    const lenSq = C * C + D * D;
    const param = dot / lenSq;

    let xx, yy;

    if (param < 0 || (x1 === x2 && y1 === y2)) {
      xx = x1;
      yy = y1;
    } else if (param > 1) {
      xx = x2;
      yy = y2;
    } else {
      xx = x1 + param * C;
      yy = y1 + param * D;
    }

    const dx = px - xx;
    const dy = py - yy;

    return Math.sqrt(dx * dx + dy * dy);
  };

  const pointToEllipseDistance = (
    point: { x: number; y: number },
    centerX: number,
    centerY: number,
    radiusX: number,
    radiusY: number,
  ) => {
    const { x, y } = point;
    const dx = x - centerX;
    const dy = y - centerY;

    return Math.sqrt(
      (dx * dx) / (radiusX * radiusX) + (dy * dy) / (radiusY * radiusY),
    );
  };

  const pointInRect = (
    point: { x: number; y: number },
    x: number,
    y: number,
    width: number,
    height: number,
  ) => {
    const { x: mouseX, y: mouseY } = point;

    // 检查鼠标坐标是否在矩形的范围内
    return (
      mouseX >= x && mouseX <= x + width && mouseY >= y && mouseY <= y + height
    );
  };

  const operationTypeChange = (value: number, event: any) => {
    if (value != 6) {
      setOperationType(value);
    }
    if (value === 3) {
      //画笔弹框
      const buttonRect = event.target.getBoundingClientRect();
      setModalPosition({ top: buttonRect.top, left: buttonRect.left });
      setBrushVisible(true);
    } else if (value === 4) {
      //图形弹框
      const buttonRect = event.target.getBoundingClientRect();
      setModalPosition({ top: buttonRect.top, left: buttonRect.left });
      setShapeVisible(true);
    } else if (value === 6) {
      const canvas = canvasRef.current!;
      const ctx = canvas.getContext('2d')!;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      setLines([]);
      setStartPoint({ x: 0, y: 0, lineIndex: 0 });
      setEndPoint({ x: 0, y: 0, lineIndex: 0 });
    } else if (value === 7) {
      window.tm!.ipcRenderer.send('capture-screen');
      message.success('截图成功！');
    } else if (value === 8) {
      window.tm!.ipcRenderer.send('close-whiteboardWindow');
    }
  };
  return (
    <div className={styles.whiteboardContent}>
      <div
        className={
          getOperationType() === 1
            ? styles.cursorTypeOne
            : getOperationType() === 2
            ? styles.cursorTypeTwo
            : getOperationType() === 3
            ? styles.cursorTypeThree
            : getOperationType() === 4
            ? styles.cursorTypeOne
            : styles.cursorTypeFive
        }
      >
        <canvas
          ref={canvasRef}
          width={screen.availWidth}
          height={screen.availHeight}
        ></canvas>
        <div id={'operationId'} className={styles.whiteboardOperation}>
          <Button
            className={getOperationType() === 1 ? 'imgCheckStyle' : 'imgStyle'}
            style={{ marginRight: 10 }}
            icon={<Icon component={mouseIcon} />}
            onClick={(event) => {
              operationTypeChange(1, event);
            }}
          >
            鼠标
          </Button>
          <Button
            icon={<Icon component={laserIcon} />}
            className={getOperationType() === 2 ? 'imgCheckStyle' : 'imgStyle'}
            style={{ marginRight: 10 }}
            onClick={(event) => {
              operationTypeChange(2, event);
            }}
          >
            激光笔
          </Button>
          <Button
            icon={<Icon component={brushIcon} />}
            className={getOperationType() === 3 ? 'imgCheckStyle' : 'imgStyle'}
            style={{ marginRight: 10, position: 'relative' }}
            onClick={(event) => {
              operationTypeChange(3, event);
            }}
          >
            画笔
          </Button>
          <Modal
            open={brushVisible}
            onOk={() => {
              setBrushVisible(true);
            }}
            onCancel={() => {
              setBrushVisible(false);
            }}
            mask={true}
            footer={null}
            width={120}
            closable={false}
            maskClosable={true}
            style={{
              position: 'absolute',
              top: modalPosition.top - 85 + 'px',
              left: modalPosition.left + 'px',
            }}
            styles={{
              content: {
                paddingLeft: 0,
                paddingRight: 0,
                paddingTop: 3,
                paddingBottom: 2,
              },
            }}
          >
            <div className={styles.brushSetting}>
              <ColorPicker
                showText
                defaultValue={'#f5222d'}
                disabledAlpha={true}
                onChangeComplete={(value) => {
                  setBrushColor(value.toRgbString());
                }}
              />
              <div className={styles.brushSettingImgList}>
                <div
                  className={
                    brushSize === 1
                      ? styles.brushSettingImgCheck
                      : styles.brushSettingImg
                  }
                  onClick={() => {
                    setBrushSize(1);
                  }}
                >
                  <SVG src={'/img/meeting/round1.svg'} />
                </div>
                <div
                  className={
                    brushSize === 2
                      ? styles.brushSettingImgCheck
                      : styles.brushSettingImg
                  }
                  onClick={() => {
                    setBrushSize(2);
                  }}
                >
                  <SVG src={'/img/meeting/round2.svg'} />
                </div>
                <div
                  className={
                    brushSize === 3
                      ? styles.brushSettingImgCheck
                      : styles.brushSettingImg
                  }
                  onClick={() => {
                    setBrushSize(3);
                  }}
                >
                  <SVG src={'/img/meeting/round3.svg'} />
                </div>
                <div
                  className={
                    brushSize === 4
                      ? styles.brushSettingImgCheck
                      : styles.brushSettingImg
                  }
                  onClick={() => {
                    setBrushSize(4);
                  }}
                >
                  <SVG src={'/img/meeting/round4.svg'} />
                </div>
              </div>
            </div>
          </Modal>
          <Button
            icon={<Icon component={shapeIcon} />}
            className={getOperationType() === 4 ? 'imgCheckStyle' : 'imgStyle'}
            style={{ marginRight: 10 }}
            onClick={(event) => {
              operationTypeChange(4, event);
            }}
          >
            图形
          </Button>
          <Modal
            open={shapeVisible}
            onOk={() => {
              setShapeVisible(true);
            }}
            onCancel={() => {
              setShapeVisible(false);
            }}
            mask={true}
            footer={null}
            width={120}
            closable={false}
            maskClosable={true}
            style={{
              position: 'absolute',
              top: modalPosition.top - 110 + 'px',
              left: modalPosition.left + 'px',
            }}
            styles={{
              content: {
                paddingLeft: 0,
                paddingRight: 0,
                paddingTop: 3,
                paddingBottom: 2,
              },
            }}
          >
            <div className={styles.brushSetting}>
              <ColorPicker
                showText
                defaultValue={'#f5222d'}
                disabledAlpha={true}
                onChangeComplete={(value) => {
                  setShapeColor(value.toRgbString());
                }}
              />
              <div className={styles.brushSettingImgList}>
                <div
                  className={
                    shapeType === 1
                      ? styles.brushSettingImgCheck
                      : styles.brushSettingImg
                  }
                  onClick={() => {
                    setShapeType(1);
                  }}
                >
                  <SVG src={'/img/meeting/line.svg'} />
                </div>
                <div
                  className={
                    shapeType === 2
                      ? styles.brushSettingImgCheck
                      : styles.brushSettingImg
                  }
                  onClick={() => {
                    setShapeType(2);
                  }}
                >
                  <SVG src={'/img/meeting/arrow.svg'} />
                </div>
                <div
                  className={
                    shapeType === 3
                      ? styles.brushSettingImgCheck
                      : styles.brushSettingImg
                  }
                  onClick={() => {
                    setShapeType(3);
                  }}
                >
                  <SVG src={'/img/meeting/circle.svg'} />
                </div>
                <div
                  className={
                    shapeType === 4
                      ? styles.brushSettingImgCheck
                      : styles.brushSettingImg
                  }
                  onClick={() => {
                    setShapeType(4);
                  }}
                >
                  <SVG src={'/img/meeting/square.svg'} />
                </div>
              </div>
              {shapeType === 1 && (
                <div className={styles.brushSettingImgList}>
                  <div
                    className={
                      getShapeSize() === 1
                        ? styles.brushSettingImgCheck
                        : styles.brushSettingImg
                    }
                    onClick={() => {
                      setShapeSize(1);
                    }}
                  >
                    <SVG src={'/img/meeting/line1.svg'} />
                  </div>
                  <div
                    className={
                      getShapeSize() === 2
                        ? styles.brushSettingImgCheck
                        : styles.brushSettingImg
                    }
                    onClick={() => {
                      setShapeSize(2);
                    }}
                  >
                    <SVG src={'/img/meeting/line2.svg'} />
                  </div>
                  <div
                    className={
                      getShapeSize() === 3
                        ? styles.brushSettingImgCheck
                        : styles.brushSettingImg
                    }
                    onClick={() => {
                      setShapeSize(3);
                    }}
                  >
                    <SVG src={'/img/meeting/line3.svg'} />
                  </div>
                  <div
                    className={
                      getShapeSize() === 4
                        ? styles.brushSettingImgCheck
                        : styles.brushSettingImg
                    }
                    onClick={() => {
                      setShapeSize(4);
                    }}
                  >
                    <SVG src={'/img/meeting/line4.svg'} />
                  </div>
                </div>
              )}
              {shapeType === 2 && (
                <div className={styles.brushSettingImgList}>
                  <div
                    className={
                      shapeSize === 1
                        ? styles.brushSettingImgCheck
                        : styles.brushSettingImg
                    }
                    onClick={() => {
                      setShapeSize(1);
                    }}
                  >
                    <SVG src={'/img/meeting/arrow1.svg'} />
                  </div>
                  <div
                    className={
                      shapeSize === 2
                        ? styles.brushSettingImgCheck
                        : styles.brushSettingImg
                    }
                    onClick={() => {
                      setShapeSize(2);
                    }}
                  >
                    <SVG src={'/img/meeting/arrow2.svg'} />
                  </div>
                  <div
                    className={
                      shapeSize === 3
                        ? styles.brushSettingImgCheck
                        : styles.brushSettingImg
                    }
                    onClick={() => {
                      setShapeSize(3);
                    }}
                  >
                    <SVG src={'/img/meeting/arrow3.svg'} />
                  </div>
                  <div
                    className={
                      shapeSize === 4
                        ? styles.brushSettingImgCheck
                        : styles.brushSettingImg
                    }
                    onClick={() => {
                      setShapeSize(4);
                    }}
                  >
                    <SVG src={'/img/meeting/arrow4.svg'} />
                  </div>
                </div>
              )}
              {shapeType === 3 && (
                <div className={styles.brushSettingImgList}>
                  <div
                    className={
                      shapeSize === 1
                        ? styles.brushSettingImgCheck
                        : styles.brushSettingImg
                    }
                    onClick={() => {
                      setShapeSize(1);
                    }}
                  >
                    <SVG src={'/img/meeting/circle1.svg'} />
                  </div>
                  <div
                    className={
                      shapeSize === 2
                        ? styles.brushSettingImgCheck
                        : styles.brushSettingImg
                    }
                    onClick={() => {
                      setShapeSize(2);
                    }}
                  >
                    <SVG src={'/img/meeting/circle2.svg'} />
                  </div>
                  <div
                    className={
                      shapeSize === 3
                        ? styles.brushSettingImgCheck
                        : styles.brushSettingImg
                    }
                    onClick={() => {
                      setShapeSize(3);
                    }}
                  >
                    <SVG src={'/img/meeting/circle3.svg'} />
                  </div>
                  <div
                    className={
                      shapeSize === 4
                        ? styles.brushSettingImgCheck
                        : styles.brushSettingImg
                    }
                    onClick={() => {
                      setShapeSize(4);
                    }}
                  >
                    <SVG src={'/img/meeting/circle4.svg'} />
                  </div>
                </div>
              )}
              {shapeType === 4 && (
                <div className={styles.brushSettingImgList}>
                  <div
                    className={
                      shapeSize === 1
                        ? styles.brushSettingImgCheck
                        : styles.brushSettingImg
                    }
                    onClick={() => {
                      setShapeSize(1);
                    }}
                  >
                    <SVG src={'/img/meeting/square1.svg'} />
                  </div>
                  <div
                    className={
                      shapeSize === 2
                        ? styles.brushSettingImgCheck
                        : styles.brushSettingImg
                    }
                    onClick={() => {
                      setShapeSize(2);
                    }}
                  >
                    <SVG src={'/img/meeting/square2.svg'} />
                  </div>
                  <div
                    className={
                      shapeSize === 3
                        ? styles.brushSettingImgCheck
                        : styles.brushSettingImg
                    }
                    onClick={() => {
                      setShapeSize(3);
                    }}
                  >
                    <SVG src={'/img/meeting/square3.svg'} />
                  </div>
                  <div
                    className={
                      shapeSize === 4
                        ? styles.brushSettingImgCheck
                        : styles.brushSettingImg
                    }
                    onClick={() => {
                      setShapeSize(4);
                    }}
                  >
                    <SVG src={'/img/meeting/square4.svg'} />
                  </div>
                </div>
              )}
            </div>
          </Modal>
          <Button
            icon={<Icon component={eraserIcon} />}
            className={getOperationType() === 5 ? 'imgCheckStyle' : 'imgStyle'}
            style={{ marginRight: 10 }}
            onClick={(event) => {
              operationTypeChange(5, event);
            }}
          >
            橡皮擦
          </Button>
          <Button
            icon={<Icon component={deleteIcon} />}
            className={getOperationType() === 6 ? 'imgCheckStyle' : 'imgStyle'}
            style={{ marginRight: 10 }}
            onClick={(event) => {
              operationTypeChange(6, event);
            }}
          >
            清空
          </Button>
          <Button
            icon={<Icon component={saveIcon} />}
            className={getOperationType() === 7 ? 'imgCheckStyle' : 'imgStyle'}
            style={{ marginRight: 10 }}
            onClick={(event) => {
              operationTypeChange(7, event);
            }}
          >
            保存
          </Button>
          <Button
            icon={<Icon component={closeIcon} />}
            className={getOperationType() === 8 ? 'imgCheckStyle' : 'imgStyle'}
            onClick={(event) => {
              operationTypeChange(8, event);
            }}
          >
            关闭
          </Button>
        </div>
      </div>
    </div>
  );
};

export default WhiteboardOperationBar;
